<template>
	<view class="detail">
		<view class="back">
			<image @click="back" src="../../static/index/fanhuiblack.png"
				style="width: 46rpx;height: 46rpx;padding-top: 60rpx;padding-left: 40rpx;" mode=""></image>
			<view class="search">
				<input class="search-input" placeholder-style="color:#fff" type="text" value="" placeholder="百事可乐" />
				<image class="search-img" src="../../static/index/search.png" mode=""></image>
			</view>
		</view>
		<view class="select-box">
			<view :class="{active:num==0}" @click="tabGoods(0)" style="font-size: 32rpx;">
				综合
			</view>
			<view :class="{active:num==1}" @click="tabGoods(1)" style="font-size: 32rpx;">
				兑换量
			</view>
			<view @click="num=2" style="display: flex;align-items: center;">
				<text :class="{active:num==2}" style="font-size: 32rpx;">积分</text>
				<view class="botton-btn">
					<image style="width: 14rpx;height: 12rpx;" @click="btn(0)" v-if="topShow"
						src="../../static/earn/shang.png" mode=""></image>
					<image style="width: 14rpx;height: 12rpx;" @click="btn(0)" v-else
						src="../../static/earn/shangactive.png" mode=""></image>
					<image style="width: 14rpx;height: 12rpx;margin-top: 8rpx;" @click="btn(1)" v-if="bottomShow"
						src="../../static/earn/xia.png" mode=""></image>
					<image style="width: 14rpx;height: 12rpx;margin-top: 8rpx;" @click="btn(1)" v-else
						src="../../static/earn/xiaactive.png" mode=""></image>
				</view>
			</view>
			<!-- <view>
				筛选<image class="screen-img" src="../../static/index/screen.png" mode=""></image>
			</view> -->
		</view>
		<view v-if="num==0" class="shops">
			<view class="box" v-for="(item,index) in shopList" :key="index" @click="shopDetail(item)">
				<image :src="item.image" class="box-left" mode=""></image>
				<view class="box-right">
					<view class="box-title">
						<text>{{item.name}}</text>
					</view>
					<view class="specification" v-if="item.comment!=''">
						<text v-for="(child,iq) in item.comment" :key="iq">{{child}}</text>
					</view>
					<view class="price">
						<text class="price-num">{{item.price}}积分</text>
						<text class="price-pople">{{item.sales}}<text v-show="item.sales>0">+</text>人兑换</text>
						<text class="price-btn">立即兑换</text>
					</view>
				</view>
			</view>
		</view>
		<view v-if="num==1" class="shops">
			<view class="box" v-for="(item,index) in shopList" :key="index" @click="shopDetail">
				<image :src="item.image" class="box-left" mode=""></image>
				<view class="box-right">
					<view class="box-title">
						<text>{{item.name}}</text>
					</view>
					<view class="specification" v-if="item.comment!=''">
						<text v-for="(child,iq) in item.comment" :key="iq">{{child}}</text>
					</view>
					<view class="price">
						<text class="price-num">{{item.price}}积分</text>
						<text class="price-pople">{{item.sales}}<text v-show="item.sales>0">+</text>人兑换</text>
						<text class="price-btn">立即兑换</text>
					</view>
				</view>
			</view>
		</view>
		<view v-if="num==2" class="shops">
			<view class="box" v-for="(item,index) in shopList" :key="index" @click="shopDetail">
				<image :src="item.image" class="box-left" mode=""></image>
				<view class="box-right">
					<view class="box-title">
						<text>{{item.name}}</text>
					</view>
					<view class="specification" v-if="item.comment!=''">
						<text v-for="(child,iq) in item.comment" :key="iq">{{child}}</text>
					</view>
					<view class="price">
						<text class="price-num">{{item.price}}积分</text>
						<text class="price-pople">{{item.sales}}<text v-show="item.sales>0">+</text>人兑换</text>
						<text class="price-btn">立即兑换</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getGoodsList
	} from '@/service/goods.js'; //商品列表
	export default {
		data() {
			return {
				num: 0,
				topShow: true, //积分上箭头
				bottomShow: true, //积分下箭头
				shopList: [], //推荐商品
				params: {
					search_name: '',
					limit: 20,
					page: 1,
					sort: 0,
					two_class:'',//二级id
				}
			}
		},
		onShow() {
			
		},
		onLoad(options) {
			this.shopList = [];//清空每一次的列表数组
			this.params.search_name = options.item
			this.params.two_class = options.id //二级分类id
			//再次进入页面 积分箭头都是未点击的状态
			this.bottomShow = true;
			this.topShow = true;
			this.getDoodsAll()
		},
		methods: {
			//商品切换模块
			tabGoods(type){
				this.topShow = true
				this.bottomShow = true
				if(type==0){//综合
					this.num=0
					this.params.sort=0
					this.getDoodsAll();
				}else if(type==1){//兑换量
					this.num = 1
					this.params.sort=2
					this.getDoodsAll();
				}
			},
			//返回
			back() {
				uni.navigateBack()
			},
			//积分箭头
			btn(type) {
				if(type==0){//升序
					this.topShow = false
					this.bottomShow = true
					this.params.sort = 3
					this.getDoodsAll()
				}else if(type==1){//降序
					this.bottomShow = false
					this.topShow = true
					this.params.sort = 4
					this.getDoodsAll()
				}
			},
			//跳转到 商品详情
			shopDetail(item) {
				let param = {
					id:item.id
				}
				let url = '../earn/earnDeail'
				this.$navTo.togo(url,param)
			},
			//商品列表
			getDoodsAll(isMore){
				// console.log(this.params,'传给后端的值');
				//获取关键词所有的商品列表
				getGoodsList(this.params).then(res=>{
					// console.log('获取关键词搜索列表',res);
					if(res.code=='200'){
						const list = res.data.data
						const total = res.data.total
						if(list.length===0){
							uni.showToast({ title: '暂无内容', icon: 'none' })
							return false
						}
						this.totalPage = Math.ceil(Number(total) / 20)
						this.shopList = isMore ? this.shopList.concat(list) : list
					}else{
						 uni.showToast({ title: res.msg || '获取列表失败', icon: 'none' })
					}
				})
			},
			//加载获取更多
			more() {
				if (this.params.page >= this.totalPage) {
					uni.showToast({ title: '没有更多啦~', icon: 'none' })
					return false
				}
				this.params.page++
				this.getDoodsAll(true)
			},
		}
	}
</script>

<style scoped lang="less">
	.box {
		padding: 10rpx;
		width: 94%;
		margin-left: 3%;
		margin-right: 3%;
		height: auto;
		background: #FFFFFF;
		opacity: 1;
		border-radius: 20rpx;
		margin-bottom: 40rpx;
		display: flex;

		.box-right {
			flex: 1;
			margin-left: 20rpx;

			.box-title {
				padding-top: 10rpx;
				font-size: 28rpx;
				line-height: 30rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #333333;
			}

			.specification {
				display: flex;
				flex-wrap: wrap;
				margin: 20rpx 0;

				text {
					text-align: center;
					background: #F2F2F2;
					padding: 14rpx 16rpx;
					font-size: 24rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #999999;
					margin-right: 20rpx;
				}
			}

			.price {
				.price-num {
					font-size: 32rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #FF7200;
				}

				.price-pople {
					font-size: 24rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #999999;
					margin: 0 20rpx;
				}

				.price-btn {
					font-size: 24rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #FF0000;
					padding-bottom: 10rpx;
				}
			}
		}

		.box-left {
			width: 200rpx;
			height: 200rpx;
			opacity: 1;
			border-radius: 20rpx;
		}
	}

	.botton-btn {
		display: flex;
		flex-direction: column;
		margin-left: 10rpx;
	}

	.screen-img {
		width: 21rpx;
		height: 22rpx;
		margin-left: 15rpx;
	}

	.select-box {
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin-bottom: 60rpx;
	}

	.active {
		font-size: 32rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #E7402E;
	}

	.back {
		display: flex;
		align-items: center;
		height: 160rpx;

		.search {
			margin-left: 36rpx;
			position: relative;
			padding-top: 60rpx;

			.search-input {
				// background-color: rgba(225,225,225,0.22);
				background-color: #C4C4C4;
				border-radius: 30rpx;
				padding-left: 60rpx;
				width: 352rpx;
				height: 64rpx;
				z-index: 99;
			}

			.search-img {
				width: 32rpx;
				height: 32rpx;
				position: absolute;
				top: 76rpx;
				left: 18rpx;
			}
		}
	}
</style>
